<template>
    <div>
      <div id="echartstooltwo"></div>
    </div>
    
  </template>
  
  <script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue";
onMounted(()=>{
    var myChart = echarts.init(document.querySelector("#echartstooltwo"));
var option;
var sandiandata=[
// [1.05, 3.33],
[2, 3.33],
[4, 2.33],
[3, 5],
[1, 2],

]
var legendData= ['haha','xixi','全选']
option = {
    legend: {
      type: "plain",
      // orient: "vertical",
      left: 100,
      top: 20,
      data:legendData,
      selected: {
        全选:true,
        管道线:true,
        井底标高线:true,
        地表标高线:true,
        11:false
      },
      selectedMode: 'multiple', // 开启多选模式
      textStyle: {
        color: "#000",
        fontSize: 16,
      }
    },
  xAxis: {
    type: 'category',
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    splitLine: { show: false },
            splitLine: { // 表格里面X轴线条
              show: true
            }
  },
  yAxis: {
    type: 'value',
 
  },
  dataZoom: [
          {
            type: 'slider',
            show: true,
            handleSize: 20, // 滑动条的 左右2个滑动条的大小
            height: 20, // 组件高度
            bottom: 20, // 右边的距离
            handleColor: '#ddd', // h滑动图标的颜色
            handleStyle: { // 两侧缩放手柄的样式配置。
              borderColor: '#cacaca',
              borderWidth: '1',
              shadowBlur: 2,
              background: '#ddd',
              shadowColor: '#ddd',
            },
            backgroundColor: 'white', // 两边未选中的滑动条区域的颜色
          },
          // 下面这个属性是拖到里面
          {
            type: 'inside',
            show: true,
            start: 1,
            end: 100,
          },
              // 竖型滚动条
      {
        type: "slider",
        width:20,
        show: true,
        yAxisIndex: [0],
        // left: "93%",
        start: 1,
        end: 100,
      },
        ],
  series: [
    {
        name:"haha",
      data: [15, 16, 17, 15, 13, 14, 16],
      type: 'line'
    },
    // 散点图
    {
        name:'xixi',
        symbol: 'circle', // 使用圆形的标记
      symbolSize: function (sandiandata) {

return sandiandata[1] * 10;

},
      data: sandiandata.map(function(item) {
      return {
        value: item,
        symbol: 'circle',
        // symbolSize: 
        itemStyle: {
          color: 'transparent',  // 设置颜色为透明，实现空心圆效果
          borderColor: 'red',    // 设置边框颜色，默认为黑色
          borderWidth: 2,        // 设置边框宽度
        }
      };
    }),
     
      type: 'scatter'
    },
      {//全选按钮的假数据
        name:'全选',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 10,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                    shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#fb7636',
                }
            },
            itemStyle: {
                color: '#00FFF0',
                borderColor: "#fff",
                borderWidth: 2,
            },

            data: []
        },
  ]
};

myChart.setOption(option);
//增加全选功能
myChart.on("legendselectchanged", e => {
    let name = e.name;
    let allSelect = "全选";
    if (name === allSelect) {
      //全选的点击事件
      for (let key in e.selected) {
        option.legend.selected[key] = e.selected[allSelect];
      }
    } else {
      //普通多选框的点击事件
      option.legend.selected[name] = e.selected[name];
      if (e.selected.name == false) {
        // 当前选中设置为false时
        option.legend.selected[allSelect] = false;
      } else {
        // 当前选中设置为true时
        let arr = Object.values(e.selected).splice(1);
        let flag = arr.every(currentValue => {
          return currentValue == true;
        });
        option.legend.selected[allSelect] = flag;
      }
    }
    myChart.setOption(option);
  });
})

  </script>
  
  <style scoped>
  #echartstooltwo {
    width: 900px;
    height: 700px;
  }
  </style>